import React, { Fragment } from 'react'
import './index.less'
import http from 'libs/http';
import Tabs from '../components/Tabs'
import { NoData } from 'components'

export default class FreeClasses extends React.Component {
  state = {
    tabsData: [
      { courseType: 0, name: '全部课程', active: true },
      { courseType: 1, name: '龙英语', },
      { courseType: 3, name: '龙编程' },
    ],
    courseType: 0,
    orderStatus: 0,
    orderFormalList: [],
  }

  componentDidMount() {
    this.uploadOrderStatus(this.props)
  }

  componentWillReceiveProps(nextProps) {
    this.uploadOrderStatus(nextProps)
  }

  // 切换左侧menu时，更新订单状态
  uploadOrderStatus = props => {
    const orderStatus = props.match.params.orderStatus
    this.setState({
      orderStatus
    }, this.getOrderList)
  }
  
  getOrderList = () => {
    const { courseType, orderStatus: status } = this.state
    http.get('/student/order-formal/list', { courseType, status }).then(res => {
      const orderFormalList = res.data
      this.setState({ orderFormalList })
    })
  }

  changeTab = index => () => {
    const { tabsData } = this.state
    let courseType = 0
    tabsData.map((tab, i) => {
      if(index === i) {
        tab.active = true
        courseType = tab.courseType
      }else{
        tab.active = false
      }
    })
    this.setState({
      courseType, tabsData
    }, this.getOrderList)
  }

  // 支付
  pay = (orderId, courseName, orderPrice) => () => {
    this.props.history.push(`/student_center/my_order/layout/pay/${orderId}/${courseName}/${orderPrice}`)
  }

  render() {
    const { tabsData, orderFormalList } = this.state
    return (
      <div className="my-order">
        <Tabs 
          tabsData={tabsData} 
          changeTab={this.changeTab}
          fontColor="#fff"
        />
        {
          orderFormalList.length > 0 ? (
            <div className="my-order-content">
              {
                orderFormalList.map(order => {
                  const {
                    allAmt, //总价
                    amt, //单价
                    courseName, //课程的名称
                    createTime, //下单时间
                    discountAllAmt, //优惠金额
                    hours, //课时数
                    orderId, //订单的ID
                    orderNo, //订单编号
                    packageName, //套餐的名称
                    payTime, //支付时间
                    realRefundAmt, //实退金额
                    refundTime, //退款日期
                    shouldPayAmt, //应付金额/实付金额
                    status, //订单状态
                  } = order
                  let statusStr = ''
                  // 0-全部，1-待支付，2-已付款，3-退款中，4-已经退款
                  switch(status) {
                    case 1: statusStr = '待支付'; break;
                    case 2: statusStr = '已付款'; break;
                    case 3: statusStr = '退款中'; break;
                    case 4: statusStr = '已退款'; break;
                  }
                  return (
                    <div key={orderId} className="order-item">
                      <div className="order-header">
                        <span>课程详情</span>
                        <span>课时单价</span>
                        <span>课时数</span>
                        <span>总价</span>
                        <span>状态</span>
                      </div>
                      <div className="order-content">
                        <div className="content-detail">
                          <div className="course-name">
                            <b>{courseName}</b>
                            <span>{packageName}</span>
                          </div>
                          <span>{amt!=0 && !isNaN(amt) ? `￥${amt}` : '--'}</span>
                          <span>x{hours}</span>
                          <span>￥{allAmt}</span>
                          <span className={status===1||status===3 ? 'order-status status-' + status : 'order-status'}>{statusStr}</span>
                        </div>
                      </div>
                      <div className="content-other">
                        <ul>
                          <li className={orderNo ? '' : 'hidden'}>订单编号：{orderNo}</li>
                          <li className={createTime ? '' : 'hidden'}>下单日期：{createTime}</li>
                          <li className={payTime ? '' : 'hidden'}>支付日期：{payTime}</li>
                          <li className={refundTime ? '' : 'hidden'}>退款日期：{refundTime}</li>
                        </ul>
                        <ul>
                          <li className={discountAllAmt !== null && isNaN(discountAllAmt) ? 'hidden' : 'discount-all-amt'}>优惠金额<span>-￥{discountAllAmt}</span></li>
                          {
                            status===1 ? (
                              <li>应付金额<span><b>￥</b>{shouldPayAmt}</span></li>
                            ) : (
                              <li>实付金额<span><b>￥</b>{shouldPayAmt}</span></li>
                            )
                          }
                          <li className={!realRefundAmt ? 'hidden' : ''}>实退金额<span><b>￥</b>{realRefundAmt}</span></li>
                        </ul>
                        <span onClick={this.pay(orderId, courseName, shouldPayAmt)} className={status===1 ? 'pay-btn' : ''}></span>
                      </div>
                    </div>
                  )
                })
              }
            </div>
          ) : <NoData />
        }
      </div>
    )
  }
}